<template>
  <div class="permit-body">
    <TableWidget ref="refHiPermit" :pagination="pagination" :columns="columns" :load="loadData"
                 :show-column="false" :show-refresh="false" :is-show-zebra="false" :row-click="onRowClick"
                 :has-select="false" :hide-pageable="false" :page-layout="'->, total, prev, pager, next'"
                 style="flex: 1; height: 420px;">
      <template v-slot:toolHeader>
        <TableSearchWidget ref="refSearch" :search="searchItems">
          <template v-slot:searchHead>
            <slot name="searchHead"/>
          </template>
          <template v-slot:searchTail>
            <el-button icon="search" type="success" @click="refresh">
              查询
            </el-button>
          </template>
        </TableSearchWidget>
      </template>
    </TableWidget>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {SERVERS, TYPES} from "@/stores/conf";
import {handleResult} from "@/utils/SystemUtil";
import {loadAssetLevelPage} from "@/apis/sop";
import {useStore} from "@/stores";
import TableWidget from "@/widget/TableWidget.vue";
import TableSearchWidget from "@/widget/TableSearchWidget.vue";

const modelValue = defineModel();
const emits = defineEmits(['selected']);

const refSearch = ref();
const refHiPermit = ref();

const searchItems = ref([
  {
    type: 'input',
    name: 'name',
    label: '权限名称',
    size: 'default',
    width: '160px',
    placeholder: `请输入权限名称`,
    clearable: true,
    defValue: '',
  },
]);

const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
});

const columns = ref([
  {
    id: 'id',
    name: '标识',
    hideCol: true,
    show: false,
    canEdit: false,
  },
  {
    id: 'name',
    name: '权限名称',
    show: true,
  },
  {
    id: 'code',
    name: '权限码',
    show: true,
  },
])

const loadData = async (params: any) => {
  const store: any = useStore();
  const platform: any = store.getCurrentPlatform();

  const result: any = await loadAssetLevelPage({
    server: SERVERS.ASSET,
    targetId: platform.id,
    assetType: TYPES.PERMIT,
    parentId: '',
    productCode: '',
    ...params
  });

  if (result && result.data) {
    handleResult(result.data, ['exist']);
  }

  return result;
}

const onRowClick = (row: any) => {
  emits('selected', row.code)
  document.body.click();
  modelValue.value = row.code;
}

const doRefresh = async (params: any) => {
  await refHiPermit.value?.refreshData({
    ...params,
    ...refSearch.value?.getSearchParams()
  });
}

const refresh = () => {
  doRefresh({});
}

onMounted(() => {
  refresh();
})

defineExpose({})
</script>

<style lang='scss' scoped>
.permit-body {
  width: 100%;
  padding: 10px;

  .permit-search {
    position: relative;
    margin-bottom: 5px;
  }
}
</style>
